<template>
	<div class="order_detail">
		<div class="step_container container" style="min-height: 144px">
			<div class="dflex" style="min-height: 84px" v-loading="orderTimeLoading"
				element-loading-background="rgba(255, 255, 255, 0.8)">
				<div v-for="(item, i) in orderTimeDatas" :key="i">
					<div class="step dflex_d_c dflex_c pos_r" :class="active ? 'active' : ''">
						<div class="circle dflex_c">
							<i class="iconfont" :class="active ? 'iconwancheng' : 'iconshijian'"></i>
							<div class="line" v-if="i < orderTimeDatas.length - 1"></div>
						</div>
						<div class="title margin_t_5">{{ item.log_type }}</div>
						<div class="time margin_t_5" v-if="active">{{ item.create_time }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="container margin_b_0">
			<h3 class="margin_b_20">基本信息</h3>
			<div class="dflex" :class="orderTableLoading ? 'owhn' : 'owao'" v-loading="orderTableLoading"
				element-loading-background="rgba(255, 255, 255, 0.8)">
				<div>
					<div class="dflex table">
						<div class="table_title padding_l_10"></div>
						<div class="table_content padding_l_10"></div>
						<div class="table_title padding_l_10">订单编号</div>
						<div class="table_content padding_l_10">
							{{ orderData.order_id || '--' }}
							<span class="copy" v-if="orderData.order_id" @click="copy(orderData.order_id)">复制</span>
						</div>
						<div class="table_title padding_l_10">下单人openid</div>
						<div class="table_content padding_l_10">
							{{ orderData.order_member_openid || '--' }}
							<span class="copy" v-if="orderData.order_member_openid"
								@click="copy(orderData.order_member_openid)">复制</span>
						</div>
					</div>
					<div class="dflex table">
						<div class="table_title padding_l_10 border_top_none">下单人</div>
						<div class="table_content padding_l_10 border_top_none owil pos_r">
							<div class="dflex_vertical_c pos_a">
								<el-image class="headimg"
									:src="orderData.order_member_headimg || 'https://7463-tcb-rflrz31u8yan4rr9ad60d-268679-1308293149.tcb.qcloud.la/1659579992133_0.png'"
									:preview-src-list="orderData.previewImgs" fit="contain"></el-image>
								<div class="margin_l_10">
									<div>{{ orderData.order_member_name || '--' }}</div>
									<div class="margin_t_5">{{ orderData.order_member_mobile || '--' }}</div>
								</div>
							</div>
						</div>
						<div class="table_title padding_l_10">收货人</div>
						<div class="table_content padding_l_10">{{ orderData.order_consignee || '--' }}</div>
						<div class="table_title padding_l_10">收货人手机号</div>
						<div class="table_content padding_l_10">{{ orderData.order_consignee_tel || '--' }}</div>
					</div>
					<div class="dflex table">
						<div class="table_title padding_l_10 border_top_none"></div>
						<div class="table_content padding_l_10 border_top_none"></div>
						<div class="table_title padding_l_10">快递公司</div>
						<div class="table_content padding_l_10">{{ orderData.order_express || '--' }}</div>
						<div class="table_title padding_l_10">快递单号</div>
						<div class="table_content padding_l_10">
							{{ orderData.order_express_no || '--' }}
							<span class="copy" v-if="orderData.order_express_no"
								@click="copy(orderData.order_express_no)">复制</span>
						</div>
					</div>
					<div class="dflex table">
						<div class="table_title padding_l_10">支付编号</div>
						<div class="table_content padding_l_10">{{ orderData.order_pay_no || '--' }}</div>
						<div class="table_title padding_l_10">支付方式</div>
						<div class="table_content padding_l_10">{{ orderData.order_pay_way || '--' }}</div>
						<div class="table_title padding_l_10">支付渠道</div>
						<div class="table_content padding_l_10">{{ orderData.order_pay_original || '--' }}</div>
					</div>
					<div class="dflex table">
						<div class="table_title padding_l_10">支付状态</div>
						<div class="table_content padding_l_10">{{ orderData.order_pay_state || '--' }}</div>
						<div class="table_title padding_l_10">订单总金额</div>
						<div class="table_content padding_l_10">{{ orderData.order_total_money || 0 }}</div>
						<div class="table_title padding_l_10">订单数量</div>
						<div class="table_content padding_l_10">{{ orderData.order_total_cnt || 0 }}</div>
					</div>
					<div class="dflex table">
						<div class="table_title padding_l_10">订单方式</div>
						<div class="table_content padding_l_10">{{ orderData.order_way || '--' }}</div>
						<div class="table_title padding_l_10">订单信息</div>
						<div class="table_content padding_l_10">{{ orderData.order_info || '--' }}</div>
						<div class="table_title padding_l_10">订单类型</div>
						<div class="table_content padding_l_10">{{ orderData.order_type || '--' }}</div>
					</div>
					<div class="dflex table">
						<div class="table_title padding_l_10">商品数量</div>
						<div class="table_content padding_l_10">{{ orderData.order_goods_cnt || 0 }}</div>
						<div class="table_title padding_l_10">实际付款金额</div>
						<div class="table_content padding_l_10">
							{{ orderData.state == '待付款' || orderData.state == '已取消' ? 0 : orderData.order_actural_paid || 0 }}
						</div>
						<div class="table_title padding_l_10">来源</div>
						<div class="table_content padding_l_10">{{ orderData.order_from || '--' }}</div>
					</div>
					<div class="dflex table">
						<div class="table_title padding_l_10">退款状态</div>
						<div class="table_content padding_l_10">{{ orderData.order_refund_state || '--' }}</div>
						<div class="table_title padding_l_10">退款原因</div>
						<div class="table_content padding_l_10">{{ orderData.order_refund_reason || '--' }}</div>
						<div class="table_title padding_l_10">退款说明</div>
						<div class="table_content padding_l_10">{{ orderData.order_refund_desc || '--' }}</div>
					</div>
					<div class="dflex table">
						<div class="table_title padding_l_10">拒绝退款原因</div>
						<div class="table_content padding_l_10">{{ orderData.order_refund_remark || '--' }}</div>
						<div class="table_title padding_l_10">状态</div>
						<div class="table_content padding_l_10">{{ orderData.state || '--' }}</div>
						<div class="table_title padding_l_10">备注</div>
						<div class="table_content padding_l_10">{{ orderData.remark || '--' }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="detail pos_r">
			<el-tabs v-model="tab" @tab-click="cutTabs">
				<el-tab-pane label="收货人" name="consignee">
					<consignee v-if="tab == 'consignee'"></consignee>
				</el-tab-pane>
				<el-tab-pane label="商品" name="goods">
					<goods v-if="tab == 'goods'"></goods>
				</el-tab-pane>
				<el-tab-pane label="日志" name="log">
					<log v-if="tab == 'log'"></log>
				</el-tab-pane>
				<el-tab-pane label="评价" name="evaluate">
					<evaluate v-if="tab == 'evaluate'"></evaluate>
				</el-tab-pane>
				<el-tab-pane label="支付" name="pay">
					<pay v-if="tab == 'pay'"></pay>
				</el-tab-pane>
			</el-tabs>
			<div class="btn pos_a">
				<el-button round icon="el-icon-back" class="return-btn" @click="returnPage">返回</el-button>
			</div>
		</div>
		<el-backtop target="uni-page-body"></el-backtop>
	</div>
</template>

<script>
	import consignee from './consignee';
	import goods from './goods';
	import log from './log';
	import evaluate from './evaluate';
	import pay from './pay';
	const __name = 'wmzmall-order';
	const __log = 'wmzmall-order-log';
	export default {
		components: {
			consignee,
			goods,
			log,
			evaluate,
			pay
		},
		data() {
			return {
				orderTimeLoading: false,
				orderTableLoading: false,
				dataId: '',
				tab: '',
				active: true,
				orderData: {},
				orderTimeDatas: []
			};
		},
		methods: {
			cutTabs(res) {
				uni.setStorage({
					key: '__tabs' + this.$route.path,
					data: res.name
				});

				let uniPageBody = document.querySelector('uni-page-body');
				let orderDatail = document.querySelector('.order_detail');

				setTimeout(() => {
					uniPageBody.scrollTop = orderDatail.clientHeight;
				}, 1);
			},
			async loadData() {
				this.orderTimeLoading = true;
				this.orderTableLoading = true;
				await this.$db[__log]
					.noshopid()
					.noaction()
					.where({
						order_id: this.dataId
					})
					.tolist({
						rows: 50,
						loading: false
					})
					.then(res => {
						if (res.code == 200) {
							res.datas.forEach((row, idx) => {
								row.create_time = new Date(row.create_time).format();
							});
							if (res.datas && res.datas.length > 0) {
								this.orderTimeDatas = res.datas;
							}
						}
						this.orderTimeLoading = false;
					});

				await this.$db[__name]
					.noshopid()
					.noaction()
					.where({
						order_id: this.dataId
					})
					.tofirst({
						loading: false
					})
					.then(res => {
						if (res.code == 200) {
							res.datas.previewImgs = [(res.datas.order_member_headimg && res.datas
									.order_member_headimg.replace("/132", "/0")) ||
								'https://7463-tcb-rflrz31u8yan4rr9ad60d-268679-1308293149.tcb.qcloud.la/1659579992133_0.png'
							];
							res.datas.order_total_money = res.datas.order_total_money / 100;
							res.datas.order_actural_paid = res.datas.order_actural_paid / 100;
							this.orderData = res.datas;
						}
						this.orderTableLoading = false;
					});
			},
			copy(data) {
				let _this = this;
				this.$copyText(data).then(
					() => {
						_this.$message({
							message: '复制成功',
							type: 'success'
						});
					},
					() => {
						_this.$message({
							message: '不可复制',
							type: 'error'
						});
					}
				);
			},
			returnPage() {
				if (this.$route.query.flag == 'order_list') {
					uni.$emit('closeTab');
					uni.redirectTo({
						url: '/pages/order/order/order_list'
					});
				} else if (this.$route.query.flag == 'refunds_dispose') {
					uni.$emit('closeTab');
					uni.redirectTo({
						url: '/pages/order/refunds_dispose'
					});
				}
			}
		},
		created() {
			this.dataId = this.$route.query.order_id || '';
			this.loadData();
		},
		mounted() {
			this.tab = uni.getStorageSync('__tabs' + this.$route.path) || 'consignee';

			this.$nextTick(() => {
				this.$api.scrollOnStorage('uni-page-body', this.$route.path);
			});

			this.$nextTick(() => {
				this.$api.scrollToStorage('uni-page-body', this.$route.path);
			});
		}
	};
</script>

<style>
	.step_container {
		overflow: auto;
		overflow: overlay;
		padding: 20px 0 40px 60px;
	}

	.step {
		margin-right: 140px;
	}

	.step .circle {
		border-radius: 50%;
		width: 60px;
		height: 60px;
		background: #dbdbdb;
		position: relative;
	}

	.step .circle .iconfont {
		color: #fff;
		font-size: 22px;
	}

	.step .title {
		font-size: 14px;
		user-select: none;
	}

	.step .time {
		font-size: 12px;
		color: #8a8a8a;
		position: absolute;
		width: 140px;
		bottom: -16px;
		left: 50%;
		transform: translateX(-50%);
		user-select: none;
	}

	.line {
		position: absolute;
		left: 80px;
		top: 30px;
		width: 100px;
		border-bottom: 1px solid #cdcdcd;
	}

	.step.active .circle {
		background: #ff6a6a;
	}

	.step.active .line {
		border-bottom: 1px solid #fe7171;
	}

	.table>div {
		border-top: 1px solid #ededed;
	}

	.table>div:nth-child(2n + 1) {
		background-color: #f6f6f6;
		font-weight: 800;
		border-left: 1px solid #ededed;
		border-right: 1px solid #ededed;
	}

	.table>div:last-child {
		border-right: 1px solid #ededed;
	}

	.table:last-child>div {
		border-bottom: 1px solid #ededed;
	}

	.table_title {
		user-select: none;
	}

	.table_title,
	.table_content {
		width: 120px;
		height: 46px;
		display: flex;
		align-items: center;
	}

	.table_content {
		width: 360px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.border_top_none {
		border-top: none !important;
	}

	.detail .btn {
		top: 7px;
		right: 0;
	}
</style>
